<template>
  <div class="show">
    <div class="zero">
      <el-col :span="12" class="one">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index.toString()"
            v-for="(result, index) in value_list"
            :key="index"
            @click="
              showtime(result.img_url);
              show_new(result.img_url);
            "
          >
            <i class="el-icon-document"></i>
            <span slot="title">{{ result.seq }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <canvas id="canvas" width="400" height="300"></canvas>
      <div id="show" v-if="result_list.length > 0">
        <div v-for="(result, index) in result_list" :key="index" id="son">
          <span style="color: red">字段名:{{ result.file_name }}</span>
          <br />
          <span style="color: blue">字段值:{{ result.field_content }}</span>
          <br />
          <span style="color: green">置信度:{{ result.score_list }}</span>
        </div>
      </div>
    </div>
    <div class="up" v-if="is_show">
      <el-upload
        class="upload-demo"
        action="http://127.0.0.1:8000/show/"
        :on-remove="handleRemove"
        :on-success="handlesuccess"
        multiple
        :limit="2"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button id="look" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <div class="load" v-if="is_show">
      <el-button id="analysis" type="primary" @click="submitFormanalytic()"
        >解析</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "show",
  data() {
    return {
      fileList: [],
      value_list: [],
      img_url: "",
      result_list: [],
      is_show: true,
      ip: "",
    };
  },
  methods: {
    handlesuccess(response, file, fileList) {
      this.ip = response;
    },
    handleRemove(response, file, fileList) {
      console.log("删除成功");
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    submitFormanalytic() {
      this.$axios({
        url: this.$settings.base_url + "/show/",
        method: "get",
        params: {
          type: "location",
          ip: this.ip,
        },
      })
        .then((response) => {
          this.value_list = response.data;
          this.is_show = false;
        })
        .catch(() => {
          this.$notify({
            type: "error",
            title: "请查看上传的文件是不是algorithm_output.json与input.json",
            duration: 3000,
          });
        });
    },
    showtime(url) {
      const img = new Image();
      const canvas = document.querySelector("#canvas");
      let ctx;
      let that;
      that = this.value_list;
      ctx = canvas.getContext("2d");
      img.onload = function (zhat) {
        // 画布大小和图片尺寸不一样算好比例
        const imgWidth = img.naturalWidth,
          imgHeight = img.naturalHeight;
        (canvas.width = imgWidth * 0.3), (canvas.height = imgHeight * 0.3);
        const zoom = {
          width: 0.3,
          height: 0.3,
        };
        // 以图画底
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 假设左上角的point 29,24 这是针对原图的坐标系
        // 假设右下角的point 124,52 这是针对原图的坐标系
        ctx.strokeStyle = "red";
        ctx.fillStyle = "rgba(0,0,0,0.2)";
        // 颜色设置，必须放在绘制之前
        // 线宽设置，必须放在绘制之前
        ctx.lineWidth = 1;
        for (var i = 0; i < that.length; i++) {
          if (url == that[i].img_url) {
            for (var y = 0; y < that[i].result_list.length; y++) {
              for (var q = 0; q < that[i].result_list[y].length; q++) {
                const startPoint = that[i].result_list[y][q].field_location[0],
                  endPoint = that[i].result_list[y][q].field_location[1],
                  score = that[i].result_list[y][q].score;
                ctx.strokeRect(
                  startPoint[1] * zoom.width,
                  startPoint[0] * zoom.height,
                  (endPoint[1] - startPoint[1]) * zoom.width,
                  (endPoint[0] - startPoint[0]) * zoom.height
                );
                ctx.fillRect(
                  startPoint[1] * zoom.width,
                  startPoint[0] * zoom.height,
                  (endPoint[1] - startPoint[1]) * zoom.width,
                  (endPoint[0] - startPoint[0]) * zoom.height
                );
                ctx.font = "20px Arial";
                ctx.strokeText(
                  score.toFixed(2),
                  startPoint[1] * zoom.width,
                  startPoint[0] * zoom.height - 10
                );
              }
            }
          }
        }
      };
      // 动手
      img.src = url;
    },
    show_new(url) {
      var that = this.value_list;
      this.$axios({
        url: this.$settings.base_url + "/show/",
        method: "put",
        data: {
          key: url,
          value: that,
        },
      }).then((response) => {
        console.log(response.data);
        this.result_list = response.data;
      });
    },
  },
};
</script>
<style>
.detail {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}
.zero {
  width: 100%;
}
.zero .one {
  height: 600px;
  width: 150px;
  overflow-x: scroll;
  white-space: nowrap;
}
.two {
  height: 100%;
}
.el-menu-vertical-demo {
  width: 200px;
}
#show {
  float: left;
  width: 600px;
}
#son {
  float: left;
  width: 170px;
  margin-left: 10px;
}
#canvas {
  float: left;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.show {
  width: 2000px;
  height: 100%;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.up {
  height: 100px;
  width: 100px;
  float: left;
}
.load {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: 10px;
}
#analysis {
  height: 40px;
  width: 100px;
}
#look {
  height: 40px;
  width: 100px;
}
</style>
